<template>
  <el-form label-width="100px" class="form-2-layout tools-update-lang">
    <el-form-item label="目标语言">
      <el-select v-model="form.lang" placeholder="请选择想要替换的语言" clearable filterable>
        <el-option v-for="(item, i) in langs" :key="i" :label="item" :value="item"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="替换类型">
      <el-select v-model="form.type" placeholder="请选择" clearable filterable>
        <el-option label="替换value" value="value"></el-option>
        <el-option label="替换key" value="key"></el-option>
        <el-option label="替换全部" value="all"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="原始内容">
      <el-input
        v-model="form.oldCon[form.type]"
        placeholder="请输入内容"
        type="textarea"
        :rows="1"
      ></el-input>
    </el-form-item>
    <el-form-item label="新内容">
      <el-input
        v-model="form.newCon[form.type]"
        placeholder="请输入内容"
        type="textarea"
        :rows="1"
      ></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
defineProps({ langs: Array as any })
const form = reactive({
  oldCon: { key: '', value: '' },
  newCon: { key: '', value: '' },
  type: '',
  lang: ''
})
</script>

<style lang="scss" scoped></style>
